<template>
	<u-transition :show="show" mode="slide-up">
	<view class="body">
		<view class="uploadtext">
			发布您的商品或动态...
		</view>
		<view class="up">
			
			<textarea  v-model="value1" placeholder="请输入内容"  height="200"></textarea>
			<view class="imguploadarea">
				<u-upload
					:fileList="fileList4"
					@afterRead="afterRead"
					@delete="deletePic"
					name="4"
					multiple
					:maxCount="4"
				></u-upload>
			</view>
		</view>
		
		<view class="down">
			<view class="textxuanx">选项</view>
			
			
			<view class="releasesw">
				<view class="iconpos">
					<u-icon name="lock-open" size="40" top="10" ></u-icon>
				</view>
				<view class="icontext">
					发布动态
				</view>
				<view class="iconbuttonB">
					<u-switch v-model="checked" @change="changebtn" activeColor="green"></u-switch>
				</view>
			</view>
			
			<view class="releasesw" v-if="checked===false">
				<view class="iconpos">
					<u-icon name="man-add" size="40" top="10" ></u-icon>
				</view>
				<view class="icontext">
					商品名称
				</view>
				<view class="iconbutton">
					<input placeholder="请输入商品名称..." v-model="productName"/>
				</view>
			</view>
			
			<view class="releasesw" v-if="checked===false">
				<view class="iconpos">
					<u-icon name="bag" size="40" top="10" ></u-icon>
				</view>
				<view class="icontext">
					商品价格
				</view>
				<view class="iconbutton">
					<!-- <u-number-box 
					     button-size="16"
					     color="#000000"
					     bgColor="#fefeff"
					     iconStyle="color: #000000"
						 @change="getPrice"
					></u-number-box> -->
					<input placeholder="请输入商品价格..." v-model="price"/>
				</view>
			</view>
			
			<view class="releasesw" v-if="checked===false">
				<view class="iconpos">
					<u-icon name="home" size="40" top="10" ></u-icon>
				</view>
				<view class="icontext">
					商品种类
				</view>
				<view class="iconbuttonC">
					<u-picker :show="showpick" :columns="columns" closeOnClickOverlay="true" @change="change" @cancel="showpick = false" @confirm="confirm"></u-picker>
					<u-icon name="arrow-right" @click="showpick = true" size="30">打开</u-icon>
				</view>
			</view>
			
			<view class="releasesw" v-if="checked===true">
				<view class="iconpos">
					<u-icon name="man-add" size="40" top="10" ></u-icon>
				</view>
				<view class="icontext">
					推荐商品
				</view>
				<view class="iconbuttonJump">
					<u-button @click="toproductList">选择商品</u-button>
				</view>
			</view>
			
		</view>
		
		<view class="release">
			<view class="textrelease" @click="releasemod">
				<view class="fabu">
					发布
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		
		
	</view>
	</u-transition>
</template>

<script>
	export default {
		data() {
			return {
				showalert:false,
				show: true,
				value:1,
				value1:null,
				fileList4: [
						],
				showpick: false,
				columns: [
				   [],
				   []
				],
				typeId:[],
				secondList:[],
				secondId:[],
				confirmSecond:null,
				productName:null,
				price:'',
				// imgList:[
				// 	'https://ts1.cn.mm.bing.net/th/id/R-C.6844b2005d90f1f83f785f0690334dfd?rik=WdOFKg9L0xb0DQ&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f5%2f9f%2f33aa6830e2.jpg%3fdown&ehk=SnywqsFP0Y6ybheRg5bVYnSWXaLabMQtVtn8CN0J9Y8%3d&risl=&pid=ImgRaw&r=0',
				// 	'http://mms2.baidu.com/it/u=3657169524,470053586&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=513&h=372'
				// ],
				checked:false,
				imglist:[],//动态,
				srcs:"/static/upload.jpg"
			}
		},
		mounted() {
			this.$axios({
				method:'POST',
				url:'/type/getTypeList',
				params:'',
			}).then(
				res =>	{
					for(var i=0;i<10;i++){
						this.columns[0].push(res.data[i].typeName);
					}
					for(var i=0;i<10;i++){
						this.typeId.push(res.data[i].id);
					}
					this.$axios({
						method:'POST',
						url:'/type/getSecondTypeListById',
						params:{
							typeId:this.typeId[0],
						}
					}).then(
						res =>	{
							for(var i=0;i<res.data.length;i++){
								this.columns[1].push(res.data[i].secondTypeName);
								this.secondId.push(res.data[i].id);

							}
							this.confirmSecond=res.data[0].id;
							//console.log("发布0获取到了吗？"+res.data)
						}
					).catch(
						err	=>	{
							
							
						}
					)
				}
			).catch(
				err	=>	{
					
					//console.log(err,"？？？")
				}
			)
		},
		
		methods: {
			
			toproductList(){
				uni.navigateTo({
					url:'/pages/production/production'
				})
			},
			changebtn(status){
				console.log("开关真值："+status);
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.imglist.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						//status: 'uploading',
						//message: '上传中'
					})
				})
				console.log(lists.length);
				for (let i = 0; i < lists.length; i++) {
					console.log(lists[i].url);
					
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					var that = this;
					uniCloud.uploadFile({
					    filePath: url,
					    cloudPath:Date.now()+'.png',
					    onUploadProgress: function(progressEvent) {
					        console.log(progressEvent);
					    },
					    success: function(res) {
					        console.log(res)
					        uni.showToast({
					            icon: 'none',
					            title: '上传成功',
					            duration: 1500
					        })
							let purl = res.fileID;
							uniCloud.getTempFileURL({
							    fileList: [purl],
							    success: function(res) {
									for(var i=0;i<res.fileList.length;i++){
										console.log("输出地址："+res.fileList[i].tempFileURL)
										that.imglist.push(res.fileList[i].tempFileURL)
									}
							        console.log(res)
							    }
							})
					    },
					});                        
				})
			},
			releasemod(){
				
				if(this.checked==false){
					console.log("商品名称:"+this.productName);
					console.log("价格:"+this.price);
					console.log("商品描述:"+this.value1);
					console.log("商品照片:"+this.imglist[0]);
					console.log("二级分类id:"+this.confirmSecond);
				}
				else{
					console.log("描述:"+this.value1);
					console.log("选择的商品:");
					console.log("上传图片url:"+this.imglist[0]);
				}
				uni.getStorage({
					key:"user",
				
					success: (res) => {
						let _this=this;
						var openId = res.data.openId
						console.log("openId:"+openId);
						if(_this.checked===true){
							this.$axios({
								method:'POST',
								url:'/article/addArticle',
								data:{
									openId:openId,
									content:_this.value1,
									//productionId:_this.confirmSecond,
									img:_this.imglist[0],
								}
							}).then(
								res =>{
									uni.showToast({
									    icon: 'none',
									    title: '发布成功',
									    duration: 1500
									})
									console.log("发布动态:"+res.data);
								}
							).catch(
								err =>{
									uni.showToast({
									    icon: 'none',
									    title: '发布失败',
									    duration: 1500
									})
									console.log("发布动态"+err);
								}
							)	
						}
						else{
							this.$axios({
								method:'POST',
								url:'/production/addProduction',
								data:{
									productionName:_this.productName,
									price:_this.price,
									openId:openId,
									message:_this.value1,
									imgList:_this.imglist,
									typeId:_this.confirmSecond
								}
							}).then(
								res =>{
									uni.showToast({
									    icon: 'none',
									    title: '发布成功',
									    duration: 3000
									})
									console.log("发布商品:"+res.data);
								}
							).catch(
								err =>{
									uni.showToast({
									    icon: 'none',
									    title: '发布失败',
									    duration: 1500
									})
									console.log("发布商品"+err);
								}
							)
						}
						
						
					}
				})
			},
			// getPrice(e){
			// 	this.price=e.value;
			// 	console.log("当前价格"+this.price);	
			// },
			change(e){
				console.log(e.index);
				this.columns[1].splice(0);
				this.secondId.splice(0);
				this.pageIndex=e.index;
				this.$axios({
					method:'POST',
					url:'/type/getSecondTypeListById',
					params:{
						typeId:this.typeId[this.pageIndex],
					}
				}).then(
					res =>	{
						for(var i=0;i<res.data.length;i++){
							this.columns[1].push(res.data[i].secondTypeName);
							this.secondId.push(res.data[i].id)
						}
						
						//console.log(res.data,"！！！")
					}
				).catch(
					err	=>	{
						
						//console.log(err,"？？？")
					}
				)
				    
			},
			confirm(e){
				
				console.log(e.value);
				console.log(e.indexs[1]);
				//console.log(this.secondId[e.indexs[1]]);
				this.confirmSecond=this.secondId[e.indexs[1]];
				console.log(this.confirmSecond);
				this.showpick = false;
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
.body{
	width: 100%;
	// height: 1540upx;
	background-color: #eeeeec;
	overflow: hidden;
	font-family:"Hiragino Sans GB","PingFang SC";
	.uploadtext{
		margin-top: 20upx;
		margin-left: 2%;
		
	}
	.up{
		width: 96%;
		margin-left: 2%;
		background-color: #ffffff;
		margin-top: 10upx;
		padding-bottom: 50upx;
		border-radius: 10upx;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	.imguploadarea{
		margin-left: 6%;
	// 	.imgupload{
	// 		width:250upx;
	// 		height:250upx;
	// 	}
	}
	.down{
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		margin-top: 20upx;
		width: 96%;
		margin-left: 2%;
		// height: 800upx;
		padding-bottom: 80upx;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 2%;
		.iconpos{
			padding-left: 3%;
			margin-top: 1%;
		}
		.textxuanx{
			margin-top: 4%;
			margin-left: 4%;
			font-size: 40upx;
		}
		.releasesw{
			margin-top: 4%;
			margin-left: 4%;
			width: 92%;
			height: 120upx;
			background-color: #eeeeec;
			border:1upx solid rgba($color: #e1e1e1, $alpha: 1.0);
			border-radius: 8upx;
			display: flex;
			border:1upx solid lightgray;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			.icontext{
				margin-top: 6%;
				margin-left: 2%;
				font-size: 30upx;
				white-space:nowrap;
			}
			.iconbutton{
				margin-top: 6%;
				margin-left: 30%;
				font-size: 25upx;
				
			}
			.iconbuttonB{
			margin-top: 7%;
			margin-left: 44%;
			width: 200upx;
			}
			.iconbuttonC{
				margin-top: 6%;
				margin-left: 46%;
				
			}
			.iconbuttonJump{
				display: flex;
				align-items: center;
				margin-left: 40%;
			}
		}
	}
	.release{
		width: 96%;
		height: 140upx;
		text-align: center;
		background-color: #ffffff;
		margin-left: 2%;
		display: flex;
		align-items: center;
		margin-top: 20upx;
		border-radius: 10upx;
		margin-bottom: 20upx;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		.textrelease{
			background-color: #e84727;
			width: 80%;
			height: 70%;
			margin-left: 10%;
			color: #eeeeef;
			display: flex;
			align-items: center;
			border-radius: 2%;
			.fabu{
				margin-left: 44%;
			}
		}
	}
}

</style>
